<script setup>

import {Delete, Edit, View} from "@element-plus/icons-vue";
import {ref} from "vue";

const groupName = ref('')
const school = ref('')
const gender = ref('')
const userName = ref('')
const Data3 =[
  {
    id:1,
    groupName: '爱拼才会赢',
    ID:123,
    Groupleader:'A组',
    leader:'A学院',
    area: '主任',
    title:'教授',
    hometown:'湖北省',
    graduation:'武汉一中',
    number:'123456'

  },
  {
    groupName: '爱拼才会赢',
    ID:123,
    Groupleader:'A组',
    leader:'A学院',
    area: '主任',
    title:'教授',
    hometown:'湖北省',
    graduation:'武汉一中',
    number:'123456'

  },
  {
    groupName: '爱拼才会赢',
    ID:123,
    Groupleader:'A组',
    leader:'A学院',
    area: '主任',
    title:'教授',
    hometown:'湖北省',
    graduation:'武汉一中',
    number:'123456'

  },
  {
    groupName: '爱拼才会赢',
    ID:123,
    Groupleader:'A组',
    leader:'A学院',
    area: '主任',
    title:'教授',
    hometown:'湖北省',
    graduation:'武汉一中',
    number:'123456'

  },
  {
    groupName: '爱拼才会赢',
    ID:123,
    Groupleader:'A组',
    leader:'A学院',
    area: '主任',
    title:'教授',
    hometown:'湖北省',
    graduation:'武汉一中',
    number:'123456'

  },

]
function resetParams(){
  groupName.value = ''
  gender.value = ''
  school.value = ''
  userName.value = ''
}
</script>

<template>
  <el-card class="page-container">
    <template #header>
      <div class="header">
        <span>招宣成员</span>
      </div>
    </template>
    <!-- 搜索表单 -->
    <el-form inline>
      <el-form-item >
        <el-select placeholder="请选择校单位" v-model="gender" style="width: 140px">
          <el-option label="A单位" value="a"></el-option>
          <el-option label="B单位" value="b"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item >
        <el-select placeholder="请选择招宣组" v-model="groupName" style="width: 140px">
          <el-option label="A组" value="a"></el-option>
          <el-option label="B组" value="b"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item >
        <el-select placeholder="请选择学院" v-model="school" style="width: 140px">
          <el-option label="A学院" value="a"></el-option>
          <el-option label="B学院" value="b"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item >
        <el-input v-model="userName" placeholder="请输入姓名查询" style="width: 140px"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getUserList">搜索</el-button>
        <el-button @click="resetParams">重置</el-button>
      </el-form-item>
      <el-form-item style="float: right">
        <el-button class="button1" type="primary" @click="importGroup">导出数据</el-button>
        <el-button class="button2" type="primary" @click="showAddDialog('添加招宣组')">
          <el-icon class="button2-1"><Plus /></el-icon>
          <div class="button2-2">编辑成员</div>
        </el-button>
      </el-form-item>
    </el-form>
    <!-- 文章列表 -->
    <el-table :data="Data3" style="width: 100%">
      <el-table-column type="index" label="序号" width="70" />
      <el-table-column label="姓名" width="150" prop="groupName"></el-table-column>
      <el-table-column label="工号" width="100" prop="ID"></el-table-column>
      <el-table-column label="所在招宣组" prop="Groupleader"></el-table-column>
      <el-table-column label="所在单位" prop="leader"></el-table-column>
      <el-table-column label="职务" prop="area"></el-table-column>
      <el-table-column label="职称" prop="title"></el-table-column>
      <el-table-column label="籍贯" prop="hometown"></el-table-column>
      <el-table-column label="毕业中学" prop="graduation"></el-table-column>
      <el-table-column label="联系电话" prop="number"></el-table-column>
      <el-table-column label="操作" width="200">
        <template #default="{ row }">
          <el-button   type="primary" @click="showEditDialog(row,'编辑招宣组')">查看</el-button>
          <el-button   type="primary" @click="Click">更多</el-button>
        </template>
      </el-table-column>
      <template #empty>
        <el-empty description="没有数据"/>
      </template>
    </el-table>
    <!-- 分页条 -->
    <div class="example-pagination-block">
      <el-pagination layout="prev, pager, next" :total="50" />
    </div>
  </el-card>
</template>

<style scoped lang="scss">
      .button1{
        width: 151px;
        height: 36px;
        border-radius: 5px;
        background: #fff;
        border: 1px solid #236cff;
        font-family: "Source Han Sans CN";
        font-weight: 400;
        font-size: 14px;
        text-align: left;
        color: #236cff;
      }
      .button2{
        width: 123px;
        height: 36px;
        border-radius: 5px;
        background: linear-gradient(130.33deg, #31efed 0%, #236cff 100%);
      }
      .button2-1{
        width: 16px;
        height: 16px;
        background: transparent;
      }
      .button2-2{
        font-family: "Source Han Sans CN";
        font-weight: 400;
        font-size: 14px;
        text-align: left;
        color: #fff;
      }

      .example-pagination-block {
        margin-top: 150px;
        float: right;
        margin-bottom: 16px;
      }
</style>
